let maxmiddle = 0 //最大页
let nowmiddle = 0  //当前页
let checkInOrder = getData('checkInOrder')
// 头部退出按钮
$('#quit').find('button').click(function () {
    open('../html/login.html', '_self')
})

showTbody()
//下拉菜单选择
$('#typeOption').click(function () {
    let searchType = $(this).val()
    // console.log(searchType);
    if (searchType == 'option1') {
        $('#OptionType').attr('placeholder', '请输入姓名')
    }
    else if (searchType == 'option2') {
        $('#OptionType').attr('placeholder', '请输入房号')
    }
    else if (searchType == 'option3') {
        $('#OptionType').attr('placeholder', '请输入最近一周时间')
    }

})

//点击主菜单
$('#mianNav .navbar-nav>li').on('click', function () {
    //设置自身为选中状态并清除其他选项的选中状态
    $(this).addClass('mianActive').siblings().removeClass('mianActive')
})

//点击二级菜单
$('main .navbar-nav>li').on('click', function () {
    //设置自身为选中状态并清除其他选项的选中状态
    $(this).addClass('active').siblings().removeClass('active')
})

// 循环添加li
// 渲染分页按钮
// let checkInOrder = getData('checkInOrder')
function fenyeanniu() {
    checkInOrder = getData('checkInOrder')
    let middlenum = Math.ceil(checkInOrder.length / 10)
    maxmiddle = middlenum
    for (let i = 1; i <= middlenum; i++) {
        $('.hear').before(`<li class='myli' id='maxli' ><a href="#">${i}</a></li>`)
    }
}
fenyeanniu()

function changeLi(a) {
    for (let i = 0; i < $('.myli').length; i++) {
        $('.myli').eq(i).removeClass('active')
    }
    $('.myli').eq(a).addClass('active')
}
changeLi(0)

// 给每一个分页按钮绑定点击事件

//  console.log(maxmiddle);
$('.pagination').on('click', '.myli', function () {
    let clickNum = $(this).text()
    // console.log(clickNum);
    nowmiddle = clickNum
    console.log(nowmiddle);
    let start = (parseInt(clickNum) - 1) * 10  //起始下标
    let end = start + 9  //终止下标
    if (clickNum == maxmiddle) {
        end = checkInOrder.length - 1  //数据最后一项的下标
    }
    showTbody(start, end)
    changeLi(nowmiddle-1)
})
//遍历数组中的房费
let num = []
let sum = 0  //累加求和
function shuju() {
    for (let j = 0; j < checkInOrder.length; j++) {
        let aggregate = parseInt(checkInOrder[j].price)
        let cash = parseInt(checkInOrder[j].cashPledge)
        num.push(aggregate)
        num.push(cash)
    }
    return num
}
shuju()

// 计算总房费+押金
function zongheji() {
    for (let k = 0; k < num.length; k++) {
        sum = sum + num[k]
    }
    return sum
}

//
let fan = []  //房费数组
let shouru = 0  //累加求和
function fanfeisr() {
    for (let j = 0; j < checkInOrder.length; j++) {
        let aggregate = parseInt(checkInOrder[j].price)
        fan.push(aggregate)
    }
    return fan
}
fanfeisr()
// 计算总房费
function fanheji() {
    for (let l = 0; l < fan.length; l++) {
        shouru = shouru + fan[l]
    }
    return shouru
}
let money3 = zongheji()
let money1 = fanheji()
let money2 = money3 - money1
let time = getTime()
//渲染页面数据

function showTbody(start, end) {
    $('#mytbody').html('')
    for (let i = start; i <= end; i++) {
        // console.log(i);
        let htmlStr = ` 
            <tr class='drf'>
                <td>${checkInOrder[i].clientName}</td>
                <td>${checkInOrder[i].roomNumber}</td>
                <td>${checkInOrder[i].price}</td>
                <td>${checkInOrder[i].cashPledge}</td>
                <td>${checkInOrder[i].checkInTime}</td>
                <td>${checkInOrder[i].outtime}</td>
                <td>${checkInOrder[i].orderState}</td>
                <td>${checkInOrder[i].inputter}</td>
                <td class='jkie'>         
                    <button class="tankuang">详情</button>
                </td>
            </tr>
            `
        $('#mytbody').append(htmlStr)
    }

}
showTbody(0, 9)
//搜索
$('#shousuo').on('click', function () {
    //清除表单中按钮的默认提交事件
    $('#table2').show()
    event.preventDefault()
    let shujuval = $(this).siblings('div').children('input').val()
    let fanhaoval = $(this).siblings('div').children('input').val()
    for (let f = 0; f < checkInOrder.length; f++) {
        if (shujuval === checkInOrder[f].clientName || fanhaoval === checkInOrder[f].roomNumber) {
            console.log(checkInOrder[f]);
            let htmlStr1 = ` 
            <tr>
                <td>${checkInOrder[f].clientName}</td>
                <td>${checkInOrder[f].roomNumber}</td>
                <td>${checkInOrder[f].price}</td>
                <td>${checkInOrder[f].cashPledge}</td>
                <td>${checkInOrder[f].checkInTime}</td>
                <td>${checkInOrder[f].outtime}</td>
                <td>${checkInOrder[f].orderState}</td>
                <td>${checkInOrder[f].inputter}</td>
                <td class='jkie'>         
                    <button class="tankuang">详情</button>
                </td>
            </tr>
            `
            $('#mytbody2').append(htmlStr1)

        }
    }
})


let shijian = []
function giyu() {

    // let ruzhushijian = $(this).siblings('div').children('input').val()
    for (let i = 0; i < checkInOrder.length; i++) {
        let ruzhushijian = checkInOrder[i].checkInTime
        // console.log(ruzhushijian);
        shijian.push(ruzhushijian)
    }

}
giyu()
$('#shousuo').on('click', function (start, end) {
    let zhi = $(this).siblings('div').children('input').val()
    console.log(zhi);

    for (let i = 0; i < checkInOrder.length; i++) {

        if (checkInOrder[i].checkInTime === zhi) {
            let htmlStr1 = ` 
        <tr>
            <td>${checkInOrder[i].clientName}</td>
            <td>${checkInOrder[i].roomNumber}</td>
            <td>${checkInOrder[i].price}</td>
            <td>${checkInOrder[i].cashPledge}</td>
            <td>${checkInOrder[i].checkInTime}</td>
            <td>${checkInOrder[i].outtime}</td>
            <td>${checkInOrder[i].inputter}</td>
            <td class='jkie'>         
                <button class="tankuang">详情</button>
            </td>
        </tr>
        `
            $('#mytbody2').append(htmlStr1)
        }
    }
})
//显示总收入
$('.table-responsive').on('click', '#count', function () {
    $('#mytbody1').html('')
    let htmlStr = ` 
            <tr>
                <td>${money1}</td>
                <td>${money2}</td>
                <td>${money3}</td>
            </tr>
            `
    $('#mytbody1').append(htmlStr)
})
//上一页
$('#front').click(function () {
    //根据当前页来判断
    let num = parseInt(nowmiddle) - 1
    let start = (parseInt(num) - 1) * 10  //起始下标
    let end = start + 9   //终止下标

    //判断当前点击的是不是第一页
    if (nowmiddle == 1) {

    } else {
        showTbody(start, end)
        nowmiddle = num   //修改完数据过后，当前页要更新
    }
})
//下页面
$('#back').click(function () {
    //根据当前页来判断
    let num = parseInt(nowmiddle) + 1   //num 是应该渲染的是哪一页
    console.log(num);
    let start = (parseInt(num) - 1) * 10  //起始下标
    let end = start + 9   //终止下标
    //判断当前点击的是不是最后一页，是最后一页的话 end值就要变
    if (num == maxmiddle) {
        end = checkInOrder.length - 1  //数据最后一项的下标
    }
    console.log(start, end);

    //判断当前点击的是不是最后一页
    if (nowmiddle == maxmiddle) {

    } else {
        showTbody(start, end)
        nowmiddle = num   //修改完数据过后，当前页要更新
    }
})
//详情
$('#mytbody').on('click', '.tankuang', function () {
    $('#myModal').modal('show')
    let nameVal = $(this).parents('tr').children('td').eq(0).text()
    let roomVal = $(this).parents('tr').children('td').eq(1).text()
    let priceVal = $(this).parents('tr').children('td').eq(2).text()
    let cashVal = $(this).parents('tr').children('td').eq(3).text()
    let timeVal = $(this).parents('tr').children('td').eq(4).text()

    $('#checkInOrder-name').val(nameVal)
    $('#checkInOrder-room').val(roomVal)
    $('#checkInOrder-price').val(priceVal)
    $('#checkInOrder-cach').val(cashVal)
    $('#checkInOrder-time').val(timeVal)
    for (let i = 0; i < checkInOrder.length; i++) {
        if (nameVal === checkInOrder[i].clientName) {
            let order = checkInOrder[i].orderNumber
            let state = checkInOrder[i].orderState
            let inputter = checkInOrder[i].inputter
            // console.log(order);
            $('#checkInOrder-order').val(order)
            $('#checkInOrder-orderState').val(state)
            $('#checkInOrder-inputter').val(inputter)

        }
    }
})
//搜索时的详情
$('#mytbody2').on('click', '.tankuang', function () {
    $('#myModal').modal('show')
    let nameVal = $(this).parents('tr').children('td').eq(0).text()
    let roomVal = $(this).parents('tr').children('td').eq(1).text()
    let priceVal = $(this).parents('tr').children('td').eq(2).text()
    let cashVal = $(this).parents('tr').children('td').eq(3).text()
    let timeVal = $(this).parents('tr').children('td').eq(4).text()

    $('#checkInOrder-name').val(nameVal)
    $('#checkInOrder-room').val(roomVal)
    $('#checkInOrder-price').val(priceVal)
    $('#checkInOrder-cach').val(cashVal)
    $('#checkInOrder-time').val(timeVal)
    for (let i = 0; i < checkInOrder.length; i++) {
        if (nameVal === checkInOrder[i].clientName) {
            let order = checkInOrder[i].orderNumber
            let state = checkInOrder[i].orderState
            let inputter = checkInOrder[i].inputter
            // console.log(order);
            $('#checkInOrder-order').val(order)
            $('#checkInOrder-orderState').val(state)
            $('#checkInOrder-inputter').val(inputter)

        }
    }
})
showHeadImgId()
$('#quit').find('button').click(function () {
    open('./login.html', '_self')
})

//显示当前登录者头像及工号
function showHeadImgId() {
    let useData = getData('staff')
    let loginUser = getData('loginUser').jobNumber
    for (let i = 0; i < useData.length; i++) {
        if (useData[i].jobNumber == loginUser) {
            $('.portrait').find('img').attr('src', useData[i].headPortrait)
            $('#quit').find('.jobId').html(useData[i].jobNumber)
        }

    }
}
// getData('staff')
let AccessLevel = getData('loginUser').AccessLevel
console.log(AccessLevel);
if (AccessLevel > 1) {
    insufficientPrivileges()
}
//权限不足提示
function insufficientPrivileges() {
        //展示权限不足框
        $('#insufficientPrivileges').show().siblings().hide()
        //清除原来的显示数据
        $('#insufficientPrivileges').html('')
        //展示权限不足
        $('#insufficientPrivileges').eq(0).append(`
         <p>权限不足请联系管理员</p>
     `)
    }